<template>
    <div class="index">
        <!--<div>用户信息{{$store.state.userinfo}}</div>-->
        <el-container style="height: 500px; border: 1px solid #eee">
            <!-- 左侧导航 -->
            <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
                <el-menu :default-openeds="['1']" router background-color="#545c64" text-color="#fff">
                    <el-menu-item index="/">vuex系统首页</el-menu-item>
                    <el-submenu index="1">
                        <template slot="title"><i class="el-icon-message"></i>账号管理</template>
                        <el-menu-item index="userlist">账号列表</el-menu-item>
                        <el-menu-item index="useradd">添加账号</el-menu-item>
                        <el-menu-item index="1-3">修改密码</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>导航二</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                        <el-menu-item index="2-3">选项3</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>导航三</template>
                        <el-menu-item index="3-1">选项1</el-menu-item>
                        <el-menu-item index="3-2">选项2</el-menu-item>
                        <el-menu-item index="3-3">选项3</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>
            <!-- 右侧内容 -->
            <el-container>
                <!--头部-->
                <el-header></el-header>
                <!-- 路由出口 -->
                <router-view />
            </el-container>
        </el-container>
    </div>
</template>
<script>
    import home from '@/components/home'
    
    export default {
        components: {
            'el-header': home
        },
        data() {
            return {
                tableData: [
                    {
                        date: '2016-05-02',
                        name: '王小虎',
                        address: '上海市普陀区金沙江路 1518 弄'
                    }
                ]
            }
        }
    };
</script>
<style>
    html, body, #app, .index{
        height: 100%;
    }
    .el-container{
        height: 100% !important;
    }
    .el-header{
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
        width:100%;
    }
    .el-aside{
        color: #333;
    }

</style>
